<template>
	<view class="popup">
		<u-popup v-model="uView.popup.show" mode="bottom" :mask-custom-style="{background: 'rgba(17, 17, 17, 0.4)'}"
			:safe-area-inset-bottom="true">
			<view class="wd-py-80r" style="background-color: #555;color:#fff">
				<view class="" v-if="type=='family'">
					<scroll-view scroll-y="true" style="max-height:400rpx">
						<view class="wd-flex wd-items-center wd-flex-wrap">
							<view class="wd-pb-60r wd-px-40r wd-w-50p" :class="fontFamily==font.name?'':'u-type-info'"
								v-for="(font, index) in fonts" :key="index" @click="onFont(font)">
								<view class="wd-text-32r" :style="{fontFamily: font.name}">
									{{ font.name }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" v-if="type=='style'">
					<view class="">
						<view class="wd-flex wd-items-center wd-justify-around wd-text-center">
							<view :class="fontWeight=='normal'?'u-type-info':''" @click="onBold">
								<u-icon name="custom-icon-fuhao-jiacu" custom-prefix="custom-icon" size="45"></u-icon>
								<view class="wd-pt-10r">加粗</view>
							</view>
							<view :class="fontStyle=='normal'?'u-type-info':''" @click="onItalic">
								<u-icon name="custom-icon-fontitalics" custom-prefix="custom-icon" size="45"></u-icon>
								<view class="wd-pt-10r">斜体</view>
							</view>
							<view :class="underline==false?'u-type-info':''" @click="onUnderline">
								<u-icon name="custom-icon-fuhao-xiahuaxian" custom-prefix="custom-icon"
									size="45"></u-icon>
								<view class="wd-pt-10r">下划线</view>
							</view>
						</view>
						<view class="wd-px-60r wd-mt-60r wd-flex wd-items-center ">
							<view class="wd-w-200r">字体大小</view>
							<view class="wd-flex-1">
								<u-slider v-model="fontSize" min="1" max="100" @moving="onSize"></u-slider>
							</view>
							<view class="wd-w-120r wd-text-right">{{ fontSize }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "alpha-popup",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {
				type: '',
				fonts: [{
						name: '汉体',
						url: 'https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/汉体.ttf'
					},
					{
						name: '华康金刚黑',
						url: 'https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/华康金刚黑.ttf'
					},
					{
						name: '造字工房云川体',
						url: 'https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/造字工房云川体.ttf'
					},
					{
						name: '锐字潮牌真言',
						url: 'https://mp-f06d4193-e086-4d74-bf0a-f2d52209893e.cdn.bspapp.com/锐字潮牌真言.ttf'
					}
				],
				fontSize: 14,
				fontFamily: '',
				fontWeight: 'normal',
				fontStyle: 'normal',
				underline: false,
				activeObj: {},
				uView: {
					popup: {
						show: false
					}
				}
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				//初始化字体
				this.fonts.map(font => {
					uni.loadFontFace({
						family: font.name,
						source: `url("${font.url}")`,
					})
				})
			},
			//展示
			show(type) {
				this.type = type;
				this.uView.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
				this.fontFamily = this.activeObj.fontFamily;

				this.fontWeight = this.activeObj.fontWeight;
				this.fontStyle = this.activeObj.fontStyle;
				this.underline = this.activeObj.underline;
				this.fontSize = this.activeObj.fontSize;
			},
			//关闭
			close() {
				this.uView.popup.show = false;
			},
			//字体
			onFont(font) {
				vk.showLoading('加载中...')
				uni.loadFontFace({
					family: font.name,
					source: `url("${font.url}")`,
					success: (e) => {
						this.fontFamily = font.name;
						this.activeObj.set({
							fontFamily: this.fontFamily
						})
						this.canvas.renderAll();
					},
					complete: () => {
						vk.hideLoading();
					}
				})
			},
			//加粗
			onBold() {
				this.fontWeight = this.fontWeight == 'normal' ? 'bold' : 'normal'
				this.activeObj.set({
					fontWeight: this.fontWeight
				})
				this.canvas.renderAll();
			},
			//斜体
			onItalic() {
				this.fontStyle = this.fontStyle == 'normal' ? 'italic' : 'normal'
				this.activeObj.set({
					fontStyle: this.fontStyle
				})
				this.canvas.renderAll();
			},
			//下划线
			onUnderline() {
				this.underline = !this.underline;
				this.activeObj.set({
					underline: this.underline
				})
				this.canvas.renderAll();
			},
			//字体大小
			onSize() {
				this.activeObj.set({
					fontSize: this.fontSize
				})
				this.canvas.renderAll();
			},
		},
	}
</script>

<style>
	.popup {}
</style>